<template>
  <b-row>
    <b-col>
      <!-- 导航栏咯老复制粘贴了 -->
      <b-row>
        <NavigationBar :type="2" />
      </b-row>
      <!-- 轮播 -->
      <b-row class="border-bottom" :style="fanju.episodes=null?'':{background:'url(https://s1.imagehub.cc/images/2023/04/04/b48aa2b1fa3ffe40f585fb251f5c5070.jpeg) center',height:' 265px'
  ,width: '100%',backgroundSize: '100%'}">
        <b-col v-if="fanju!=null" class="px-0">
          <b-carousel controls fade>
            <b-carousel-slide :caption-html="getInfo(img)" v-for="img in today.episodes" :key="img.season_id">
              <template v-slot:img>
                <!-- <b-img-lazy center height="350" :src="'https://images.weserv.nl/?url='+img.ep_cover" /> -->
                <div :style="{background:'url(https://images.weserv.nl/?url='+img.ep_cover+') center' ,backgroundSize:'100%',height:'265px'}" />
              </template>
            </b-carousel-slide>
          </b-carousel>
        </b-col>
      </b-row>
      <b-row>
        <b-container class="bg-white border">
          <!-- 第一列的 -->
          <!-- 地区 -->
          <b-row class="justify-content-start selection1 mt-2">
            <b-col class="col-1 py-2" style="font-family:HYZhengYuan-55S">地区</b-col>
            <b-col class="pl-0">
              <b-row>
                <b-col v-for="area in areas" :key="area.id" class="col-1 text-center rounded py-1" :class="{selecting1:line1 == area.id}">
                  <b-link style="font-family:HYZhengYuan-55S" @click="chooseId(1,area.id)" class="text-decoration-none text-primary"
                    :class="{'text-muted':line1 != area.id}">{{area.content}}</b-link>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
          <!-- 状态 -->
          <b-row class="justify-content-start selection1 mt-2">
            <b-col class="col-1 py-2" style="font-family:HYZhengYuan-55S">状态</b-col>
            <b-col class="pl-0">
              <b-row>
                <b-col v-for="state in states" :key="state.id" class="col-1 text-center rounded py-1" :class="{selecting1:line2 == state.id}">
                  <b-link style="font-family:HYZhengYuan-55S" @click="chooseId(2,state.id)" class="text-decoration-none text-primary"
                    :class="{'text-muted':line2 != state.id}">{{state.content}}</b-link>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
          <!-- 年份 -->
          <b-row class="justify-content-start selection1 mt-2">
            <b-col class="col-1 py-2" style="font-family:HYZhengYuan-55S">年份</b-col>
            <b-col class="pl-0">
              <b-row>
                <b-col v-for="year in years" :key="year.id" class="col-1 text-center rounded py-1" :class="{selecting1:line3 == year.id}">
                  <b-link style="font-family:HYZhengYuan-55S" @click="chooseId(3,year.id)" class="text-decoration-none text-primary"
                    :class="{'text-muted':line3 !=year.id }">{{year.content}}</b-link>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
          <!-- 风格 -->
          <b-row class="justify-content-start selection1 mt-2">
            <b-col class="col-1 py-2" style="font-family:HYZhengYuan-55S">风格</b-col>
            <b-col class="pl-0">
              <b-row>
                <b-col v-for="style in styles" :key="style.id" class="col-1 text-center rounded py-1" :class="{selecting1:line4 == style.id}">
                  <b-link style="font-family:HYZhengYuan-55S" @click="chooseId(4,style.id)" class="text-decoration-none text-primary "
                    :class="{'text-muted':line4 != style.id}">{{style.content}}</b-link>
                </b-col>
              </b-row>
            </b-col>
          </b-row>

          <!-- 第二列的 -->
          <b-row class="justify-content-start mt-2 selection2 border-top">
            <b-col class="col-md-auto pt-1">
              <b-link class="text-decoration-none unSelecting" :class="{selecting2:line5 === '3'}" @click="chooseId(5,'3')">追番人数</b-link>
            </b-col>
            <b-col class="col-md-auto pt-1">
              <b-link class="text-decoration-none unSelecting" :class="{selecting2:line5 === '4'}" @click="chooseId(5,'4')">最高评分</b-link>
            </b-col>
            <b-col class="col-md-auto pt-1">
              <b-link class="text-decoration-none unSelecting" :class="{selecting2:line5 === '2'}" @click="chooseId(5,'2')">播放数量</b-link>
            </b-col>
          </b-row>

          <!-- 第三列的 番剧列表 带图我想 -->
          <b-row class="mt-2 mb-1" v-for="f in fanju.list" :key="f+createId()">
            <b-col class="ml-3 border-bottom col-auto" v-for="list in f" :key="list+createId()">
              <!-- 图片 -->
              <b-row>
                <b-col @click="toThisPage(list.media_id)" class="col-auto px-0">
                  <b-img-lazy class="rounded shadow-sm border fanju" height="260" width="170"
                    blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp"
                    :src="'https://images.weserv.nl/?url='+list.cover" />
                  <div class="fanOrder rounded">{{list.order}}</div>
                </b-col>
              </b-row>
              <!-- 信息 -->
              <b-row @click="toThisPage(list.media_id)" class="fanju mt-2" style="width:170px;height:72px">
                <b-col>
                  <b-row>
                    <span style="font-size:15px">{{list.title}}</span>
                  </b-row>
                  <!-- 完结状况 -->
                  <b-row>
                    <span v-if="list.is_finish == 1" class="text-muted" style="font-size:14px">{{list.index_show}}</span>
                    <span v-else-if="list.is_finish == 0" class="text-muted" style="font-size:14px">{{list.index_show}}</span>
                    <span v-if="list.index_show == ''" class="text-muted" style="font-size:14px">暂未开播</span>
                  </b-row>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
          <b-row v-if="timeout">
            <b-container>
              <b-col class="text-center" style="font-family:HYZhengYuan-55S;font-size:20px">
                暂无结果
              </b-col>
            </b-container>
          </b-row>
          <!-- 翻页 -->
          <b-row class="mt-2" v-if="fanju.list !=null">
            <b-col>
              <b-pagination-nav prev-text="上一页" next-text="下一页" use-router base-url="/AnimationPage?page=" :value="fanju.num" align="center" size="md"
                :number-of-pages="Math.ceil(fanju.total/24)" />
            </b-col>
          </b-row>
        </b-container>
      </b-row>
    </b-col>
  </b-row>

</template>

<script>
import { nanoid } from 'nanoid';
import pageRedirect from '@/utils/pageRedirect';
import NavigationBar from '../NavigationBar.vue';
export default {
  components: { NavigationBar },
  name: 'AnimationPage',
  data() {
    return {
      //选择栏文字内容
      areas: [
        {
          id: '0',
          content: "全部",
          code: "-1",
        },
        {
          id: null,
          content: "日本",
          code: "2",
        },
        {
          id: null,
          content: "美国",
          code: "3"
        },
        // {
        //   id: null,
        //   content: "大陆",
        //   code: "1,6,7",
        // },
      ],
      states: [
        {
          id: '0',
          content: "全部",
          code: -1,
        },
        {
          id: null,
          content: "完结",
          code: 1,
        },
        {
          id: null,
          content: "连载",
          code: 0,
        },
      ],
      years: [
        {
          id: '0',

          content: '全部'
        },
        {
          id: null,
          content: '2023',
        },
        {
          id: null,
          content: '2022',
        },
        {
          id: null,
          content: '2021',
        },
        {
          id: null,
          content: '2020',
        },
        {
          id: null,
          content: '2019',
        },
        {
          id: null,
          content: '2018',
        },
        {
          id: null,
          content: '2017',
        },
        {
          id: null,
          content: '2016',
        },
        {
          id: null,
          content: '2015',
        },
      ],
      styles: [
        {
          id: '0',
          content: "全部",
          code: -1,
        },
        {
          id: null,
          content: "原创",
          code: 10010,
        },
        {
          id: null,
          content: "漫画改",
          code: 10011,
        },
        {
          id: null,
          content: "小说改",
          code: 10012,
        },
        {
          id: null,
          content: "游戏改",
          code: 10013,
        },
        {
          id: null,
          content: "特摄",
          code: 10102,
        },
        {
          id: null,
          content: "布袋戏",
          code: 10015,
        },
        {
          id: null,
          content: "热血",
          code: 10016,
        },
        {
          id: null,
          content: "穿越",
          code: 10017,
        },
        {
          id: null,
          content: "奇幻",
          code: 10018,
        },
        {
          id: null,
          content: "战斗",
          code: 10020,
        },
        {
          id: null,
          content: "搞笑",
          code: 10021,
        },
        {
          id: null,
          content: "日常",
          code: 10022,
        },
        {
          id: null,
          content: "科幻",
          code: 10023,
        },
        {
          id: null,
          content: "萌系",
          code: 10024,
        },
        {
          id: null,
          content: "治愈",
          code: 10025,
        },
        {
          id: null,
          content: "校园",
          code: 10026,
        },
        {
          id: null,
          content: "少儿",
          code: 10027,
        },
        {
          id: null,
          content: "泡面",
          code: 10028,
        },
        {
          id: null,
          content: "恋爱",
          code: 10029,
        },
        {
          id: null,
          content: "少女",
          code: 10030,
        },
        {
          id: null,
          content: "魔法",
          code: 10031,
        },
        {
          id: null,
          content: "冒险",
          code: 10032,
        },
        {
          id: null,
          content: "历史",
          code: 10033,
        },
        {
          id: null,
          content: "架空",
          code: 10034,
        },
        {
          id: null,
          content: "机战",
          code: 10035,
        },
        {
          id: null,
          content: "神魔",
          code: 10036,
        },
        {
          id: null,
          content: "声控",
          code: 10037,
        },
        {
          id: null,
          content: "运动",
          code: 10038,
        },
        {
          id: null,
          content: "励志",
          code: 10039,
        },
        {
          id: null,
          content: "音乐",
          code: 10040,
        },
        {
          id: null,
          content: "推理",
          code: 10041,
        },
        {
          id: null,
          content: "社团",
          code: 10042,
        },
        {
          id: null,
          content: "智斗",
          code: 10043,
        },
        {
          id: null,
          content: "催泪",
          code: 10044,
        },
        {
          id: null,
          content: "美食",
          code: 10045,
        },
        {
          id: null,
          content: "偶像",
          code: 10046,
        },
        {
          id: null,
          content: "乙女",
          code: 10047,
        },
        {
          id: null,
          content: "职场",
          code: 10048,
        },
      ],
      //发送类型的代码
      IndexFilter: {
        Area: {
          ALL: "-1",
          CHINA: "1,6,7",
          JAPAN: "2",
          USA: "3"
        },
        State: {
          ALL: -1,
          FINISHED: 1,
          UNFINISHED: 0,
        },
        Style: {
          ALL: -1,
          ORIGINAL: 10010,
          COMIC: 10011,
          NOVEL: 10012,
          GAME: 10013,
          TOKUSATSU: 10102,
          BUDAIXI: 10015,
          WARM: 10016,
          TIMEBACK: 10017,
          IMAGING: 10018,
          WAR: 10020,
          FUNNY: 10021,
          DAILY: 10022,
          SCIENCE_FICTION: 10023,
          MOE: 10024,
          HEAL: 10025,
          SCHOOL: 10026,
          CHILDREN: 10027,
          NOODLES: 10028,
          LOVE: 10029,
          GIRLISH: 10030,
          MAGIC: 10031,
          ADVENTURE: 10032,
          HISTORY: 10033,
          ALTERNATE: 10034,
          MACHINE_BATTLE: 10035,
          GODS_DEMONS: 10036,
          VOICE: 10037,
          SPORTS: 10038,
          INSPIRATIONAL: 10039,
          MUSIC: 10040,
          ILLATION: 10041,
          SOCIETIES: 10042,
          OUTWIT: 10043,
          TEAR: 10044,
          FOODS: 10045,
          IDOL: 10046,
          OTOME: 10047,
          WORK: 10048,
        }
      },
      //标记是否点击了该元素
      line1: '0',
      line2: '0',
      line3: '0',
      line4: '0',
      line5: '3',
      sort: 1,
      //查询的数据
      fanju: {
        list: null,
      },
      //今日更新的番剧数据轮播
      today: {
        episodes: null,
      },
      timeout: false,
    }
  },
  methods: {
    //更改光标位置
    chooseId(line, id) {
      switch (line) {
        case 1: this.line1 = id; break;
        case 2: this.line2 = id; break;
        case 3: this.line3 = id; break;
        case 4: this.line4 = id; break;
        case 5: this.line5 = id; break;
      }
      this.serach(this.$route.query.page);
    },

    //跳转到相应的番剧页面
    toThisPage(id) {
      pageRedirect.toAnimationDetails(id, "media_id");
    },

    //搜索所选类型番剧
    serach(page) {
      let area, state, year, style, order, info;
      for (let i = 0; i < this.areas.length; i++) {
        if (this.line1 == this.areas[i].id) {
          area = this.areas[i].code;
          info = this.areas[i].content;
        }
      }
      for (let i = 0; i < this.states.length; i++) {
        if (this.line2 == this.states[i].id) {
          state = this.states[i].code;
          info = info + "," + this.states[i].content;
        }
      }
      for (let i = 0; i < this.years.length; i++) {
        if (this.line3 == this.years[i].id) {
          year = this.years[i].content;
          if (year == '全部') {
            year = '-1';
          }
          info = info + "," + this.years[i].content;
        }
      }
      for (let i = 0; i < this.styles.length; i++) {
        if (this.line4 == this.styles[i].id) {
          style = this.styles[i].code;
          info = info + "," + this.styles[i].content;
        }
      }
      order = this.line5;
      console.log("本次搜索项目\n" + info);

      //搜索
      this.$httpBangumi.serachBangumi(area, state, year, style, order, page).then((res) => {
        // console.log(res);
        if (res == "timeOut") {
          this.timeout = true;
          return
        }
        this.fanju = res;
        this.fanju.list = this.splitData(res.list, 6);
      })
    },

    //将数据拆成指定的二维数组
    splitData(fromArr, mountOfEachLine) {
      //装二维数组的容器（目标数组）
      let newArr = [];
      //源数组元素个数
      let len = fromArr.length;
      //计算出指定好的 mountOfLine 源数组能分成几个子数组
      let lineNum = len % mountOfEachLine == 0 ? len / mountOfEachLine : Math.ceil(len / mountOfEachLine);
      //将源数组的元素拿出来，放到新数组 newArr 容器内
      for (let i = 0; i < lineNum; i++) {
        let tempElement = fromArr.slice(i * mountOfEachLine, (i + 1) * mountOfEachLine);
        newArr.push(tempElement);
      }
      return newArr;
    },

    //整理轮播图中的番剧信息
    getInfo(obj) {
      return "<b-col class='rounded-pill px-4' style='background-color:#41414187'>" +
        "<span style='font-size:25px;font-family:HYZhengYuan-55S'>" + obj.title + "</span>"
        + "</b-col>"
    },
    //生成唯一id
    createId() {
      return nanoid(4);
    }
  },
  beforeRouteUpdate(to) {
    this.serach(to.query.page);
    this.$route.query.page = to.query.page;
  },
  mounted() {
    //给我的所有子元素赋予id才好点击 草好废一番功夫
    for (let i = 1; i < this.areas.length; i++) {
      this.areas[i].id = nanoid(4)
    }
    for (let i = 1; i < this.states.length; i++) {
      this.states[i].id = nanoid(4)
    }
    for (let i = 1; i < this.years.length; i++) {
      this.years[i].id = nanoid(4)
    }
    for (let i = 1; i < this.styles.length; i++) {
      this.styles[i].id = nanoid(4)
    }
    this.serach(this.$route.query.page);
    //获取今日更新数据
    this.$httpBangumi.getDailyBangumi().then((res) => {
      this.today = res.today;
    })
    document.title = "WaaFun-番剧分类"
  }
}
</script>

<style scoped>
.selection1 {
  font-size: 17px;
}
.selection2 {
  font-size: 18px;
}
.unSelecting {
  color: #6c757d;
}
.selecting1 {
  background-color: #b3dbff;
}
.selecting2 {
  color: black;
}
.img {
  max-width: 213px;
}
.fanOrder {
  position: absolute;
  padding: 28px 10px 0;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 50px;
  line-height: 1;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  background: -o-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.6) 0,
    rgba(0, 0, 0, 0) 100%
  );
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgba(0, 0, 0, 0.6)),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(0,255,255),ff,endColorstr=rgba(153,0,0,0),0,GradientType=0);
}
.fanju:hover {
  cursor: pointer;
}
</style>